/**
 * @file TeacherFormModal.vue
 * @description 教师信息表单模态框组件
 * @created 2024-07-15
 */

<template>
  <div class="modal-overlay" @click.self="closeModal">
    <div class="modal-container">
      <div class="modal-header">
        <h2>{{ isEdit ? '编辑教师信息' : '添加新教师' }}</h2>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>
      
      <div class="modal-body">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="teacher_code">教师编号 <span class="required">*</span></label>
            <input 
              type="text" 
              id="teacher_code" 
              v-model="formData.teacher_code" 
              required
              :disabled="isEdit"
              placeholder="请输入教师编号"
            />
          </div>
          
          <div class="form-group">
            <label for="name">姓名 <span class="required">*</span></label>
            <input 
              type="text" 
              id="name" 
              v-model="formData.name" 
              required
              placeholder="请输入教师姓名"
            />
          </div>
          
          <div class="form-group">
            <label for="gender">性别</label>
            <select id="gender" v-model="formData.gender">
              <option value="">请选择</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="title">职称</label>
            <select id="title" v-model="formData.title">
              <option value="">请选择</option>
              <option value="教授">教授</option>
              <option value="副教授">副教授</option>
              <option value="讲师">讲师</option>
              <option value="助教">助教</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="college_id">所属学院 <span class="required">*</span></label>
            <select 
              id="college_id" 
              v-model="formData.college_id" 
              required
              @change="handleCollegeChange"
            >
              <option value="">请选择学院</option>
              <option v-for="college in colleges" :key="college.id" :value="college.id">
                {{ college.name }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="department_id">系部 <span class="required">*</span></label>
            <select 
              id="department_id" 
              v-model="formData.department_id" 
              required
            >
              <option value="">请选择系部</option>
              <option 
                v-for="dept in filteredDepartments" 
                :key="dept.id" 
                :value="dept.id"
              >
                {{ dept.name }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="email">邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="formData.email" 
              placeholder="请输入邮箱地址"
            />
          </div>
          
          <div class="form-group">
            <label for="phone">电话</label>
            <input 
              type="tel" 
              id="phone" 
              v-model="formData.phone" 
              placeholder="请输入联系电话"
            />
          </div>
          
          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="closeModal">取消</button>
            <button type="submit" class="submit-btn">{{ isEdit ? '保存修改' : '添加教师' }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 教师表单模态框组件
 * @description 用于添加和编辑教师信息的表单模态框
 */
import { ref, computed, onMounted } from 'vue'

// 定义组件属性
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  },
  teacherData: {
    type: Object,
    default: () => ({})
  },
  colleges: {
    type: Array,
    default: () => []
  },
  departments: {
    type: Array,
    default: () => []
  }
})

// 定义组件事件
const emit = defineEmits(['close', 'submit'])

// 表单数据
const formData = ref({
  id: props.teacherData.id || null,
  teacher_code: props.teacherData.teacher_code || '',
  name: props.teacherData.name || '',
  gender: props.teacherData.gender || '',
  title: props.teacherData.title || '',
  college_id: props.teacherData.college_id || '',
  department_id: props.teacherData.department_id || '',
  email: props.teacherData.email || '',
  phone: props.teacherData.phone || ''
})

// 根据选择的学院筛选系部列表
const filteredDepartments = computed(() => {
  if (!formData.value.college_id) {
    return []
  }
  return props.departments.filter(
    dept => dept.college_id === parseInt(formData.value.college_id)
  )
})

// 学院变更时清空系部选择
const handleCollegeChange = () => {
  formData.value.department_id = ''
}

// 提交表单
const submitForm = () => {
  // 表单验证
  if (!formData.value.teacher_code || !formData.value.name || !formData.value.college_id || !formData.value.department_id) {
    alert('请填写必填项')
    return
  }
  
  // 转换ID类型为数字
  const data = {
    ...formData.value,
    college_id: parseInt(formData.value.college_id),
    department_id: parseInt(formData.value.department_id)
  }
  
  // 触发提交事件
  emit('submit', data)
}

// 关闭模态框
const closeModal = () => {
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.required {
  color: #f56c6c;
  margin-left: 2px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #409eff;
}

.form-group input:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.form-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f2f6fc;
  color: #606266;
}

.submit-btn {
  background-color: #409eff;
  color: white;
}

.cancel-btn:hover {
  background-color: #e6ebf5;
}

.submit-btn:hover {
  background-color: #66b1ff;
}
</style> 